<template>
    <div class="handdle">

        <div class="waibu" v-bind:class="{active:classDate.handdleClass}">

         </div>
      <div class="neibu" v-on:click="chageHanddleStatuc()">管理
          </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: '13213',
        classDate: {
          handdleClass: false
        }
      }
    },
    methods: {
      chageHanddleStatuc: function () {
        this.classDate.handdleClass = !this.classDate.handdleClass
      }
    }
  }
</script>


<style>
.handdle{
width: 60px;
  height: 60px;
  right:0px;
  top:100px;
  color: #fff;
  text-align: center;
  position: relative;
  position:fixed ;

}
  .handdle .waibu{
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background: #999;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-360deg);
    -webkit-transition: 1s;
    transition: 1s;

  }
.handdle .waibu.active{
  width: 160px;
  height: 160px;
  transform: translateX(-50%) translateY(-50%) rotate(0deg);
  transition: 1s;
}
.handdle .neibu{
  width: 60px;
  height: 60px;
  border:1px solid #fff;
  border-radius: 50%;
  background: #999;
  opacity: 0.9;
  position: absolute;
  text-align: center;
  line-height: 60px;
  top:50%;
  left:72%;
  z-index: 999;
  transform: translateX(-50%) translateY(-50%);


}
</style>
